<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body{
            font-size: 14px;
        }
        .layui-nav{
            background-color: #2ebff3;
        }
        .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
            background-color: #28b0e1;
        }
        .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
            background-color: #139aca;
        }
        .layui-nav .layui-nav-item{
            line-height: 40px;
        }
        .layui-nav-child{
            top: 40px;
        }
        .order-div{
            background: #fff;
            padding: 3vw;
            margin-bottom: 1.5vw;
        }
        .time{
            color: #999;
        }
        .game-name{
            background: rgba(249, 107, 107, 1);
            color: #fff;
            padding: 3px 10px;
        }
        .price{
            color: #4CAF50;
            margin-left: 4vw;
        }
        .reward{
            border: 1px solid rgba(249, 107, 107, 1);
            color: rgba(249, 107, 107, 1);
            padding: 3px 10px;
            margin-left: 2vw;
        }
        .address{
            font-size: 12px;
        }
        .ln-h-30{
            line-height: 30px;
        }
        #pagination{
            text-align: center;
        }
        .layui-laypage a, .layui-laypage span{
            padding: 1px 10px;
        }
        .pageScroll{
            height: 86vh;
            overflow: auto;
        }
    </style>
</head>
<body>

<div class="head-nav">
    <div class="nav-left" onclick="javascript:history.back(-1)"><img src="img/gua/u18.png"></div>
    <div class="nav-title">我的订单</div>
</div>
<div class="main">
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">全部彩种</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="guaMyOrder.html">全部</a></dd>
                <dd><a href="guaMyOrder.html">开宝箱</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">中奖状态</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="guaMyOrder.html">全部</a></dd>
                <dd><a href="guaMyOrder.html?isPrize=1">已中奖</a></dd>
                <dd><a href="guaMyOrder.html?isPrize=0">未中奖</a></dd>
            </dl>
        </li>
    </ul>
    <div class="pageScroll">
        <div id="orderList">

        </div>
        <div id="pagination"></div>
    </div>

</div>

<script type="text/order">
    <div class="order-div">
            <div class="time">{create_time}</div>
            <div class="ln-h-30">
                <span class="game-name">{game_name}</span>
                <span class="price">{money}</span>
                <span class="reward">{prize_result}</span>
            </div>
            <div class="address">地址：{shop_name}</div>
        </div>
</script>

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script src="layui/layui.js"></script>

<script type="application/javascript">
    $(function () {
        loadList();
    });

    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });

    /*$(".layui-nav-child a").on("click",function () {
        $(".layui-nav-child").removeClass("layui-show");
        $(".layui-nav-bar").css("opacity","0");
        $(".layui-nav-mored").removeClass("layui-nav-mored");
    });*/

    function loadList() {
        var userId = $.cookie("userId");
        //var userId = "aa11";
        var isPrize = Common.queryGetParam("isPrize");
        var paramStr = {};
        paramStr.userId = userId;
        paramStr.pageLimit = 10;
        paramStr.pageStart = 0;
        if(isPrize){
            paramStr.is_prize = isPrize;
        }
        var params = {};
        params.paramStr =  JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/game/getOrderByUserId", params, function(data) {
            drawList(data.datas);
            layui.use('flow', function(){
                var flow = layui.flow;
                flow.load({
                    elem: '#pagination' //指定列表容器
                    ,isAuto:false  //是否自动加载
                    , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                        if(page!=1){
                            paramStr.pageStart = (page-1)*paramStr.pageLimit;
                            var p = {};
                            p.paramStr = JSON.stringify(paramStr);
                            Common.ajaxWithParam("/fenful/api/v1/game/getOrderByUserId",p,function (d2) {
                                drawList(d2.datas);
                            });
                        }
                        next('', (page*paramStr.pageLimit) < data.pageTotal);
                    }
                });
            });

        });
    }

    function drawList(list) {
        //$("#orderList").empty();
        if(list.length==0){
            $("#orderList").append("暂无记录");
        }else{
            var html = $("script[type='text/order']").html();
            for(var index in list){
                var htmlStr = Common.formatTemplate(list[index],html,"");
                $("#orderList").append(htmlStr);
            }
        }

    }

</script>
</body>
</html>